<template>
  <div>
    <draggable v-model="componentList" :group="{ name: groupName, pull: pull, put: put, sort: false }" @end="End">
      <div class="item"
           v-for="(item, index) in componentList"
           :key="index"
           v-if="item && item.show"
      >
        <!-- 加载容器并递归渲染 -->
        <component v-if="item.componentType === 'container'"
                   :is="item.is"
                   :groupName="item.groupName"
                   :key="index">
        </component>
        <!-- 加载表格 -->
        <component v-else-if="item.componentType === 'table'"
                   :is="item.is"
                   :componentType="item.componentType"
                   :type="item.type"
                   :tableData="item.tableData"
                   :columns="item.columns"
                   :key="index">
        </component>
        <!-- 加载表格 -->
        <component v-else-if="item.componentType === 'mySelf'"
                   :is="item.is"
                   v-if="false"
                   :key="index">
        </component>
        <!-- 加载输入框 -->
        <component v-else-if="item.componentType === 'input'"
                   :is="item.is"
                   :labelText="item.labelText"
                   :defaultValue="item.defaultValue"
                   :placeholder="item.placeholder"
                   :key="index">
        </component>
        <!-- 加载按钮 -->
        <component v-else-if="item.componentType === 'button'"
                   :is="item.is"
                   :labelText="item.labelText"
                   :type="item.type"
                   :key="index">
        </component>
        <!-- 加载图标 -->
        <component v-else-if="item.componentType === 'icon'"
                   :is="item.is"
                   :iconClass="item.iconClass"
                   :key="index">
        </component>
      </div>
    </draggable>
  </div>
</template>

<script>
import draggable from "vuedraggable";
import MyIcon from "@/components/components/MyIcon";
import MyButton from "@/components/components/MyButton";
import MyInput from "@/components/components/MyInput";
import MyLink from "@/components/components/MyLink";
import MyRadio from "@/components/components/MyRadio";
import MyTable from "@/components/components/MyTable";
import MyContainer from "@/components/components/MyContainer";
import MySelf from "@/components/components/MySelf";

export default {
  name: "MyDraggable",
  components: {
    draggable,
    MyIcon,
    MyInput,
    MyLink,
    MyRadio,
    MyButton,
    MySelf,
    MyTable,
    MyContainer
  },
  props: {
    componentList: {
      type: Array,
      default: () => []
    },
    groupName: {
      type: String,
      default: "sky"
    },
    pull: {
      type: String,
      default: "clone"
    },
    put: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
    }
  },
  watch: {
    componentList: {
      handler(newVal) {
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
      End(item) {
          this.$emit('handlePush', this.componentList[item.oldIndex]);
      }
  }
}
</script>

<style scoped>
.item {
  padding: 10px;
  border: 1px solid #ccc;
  margin: 5px;
  background-color: #f9f9f9;
}
</style>
